<template>
  <el-form :inline="true" size="small" :model="queryData" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="queryData.name" placeholder="请输入用户名" clearable />
    </el-form-item>
    <el-form-item>
      <el-button @click="getData">查询</el-button>
      <el-button type="primary" @click="addStaff">添加员工</el-button>
      <el-button @click="delHouse">删除68628房源</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="pageData.tableData" style="width: 100%">
    <el-table-column type="index" width="60" label="序号" />
    <el-table-column prop="portName" label="部门名称" width="180" />
    <el-table-column prop="id" label="员工工号" width="180" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="job" label="职务" />
    <el-table-column prop="tel" label="手机号" />
    <el-table-column prop="password" label="生成密码" />
    <el-table-column label="操作" width="150">
      <template #default="scope">
        <el-button type="primary" size="small" @click="doEdit(scope.row.id)">编辑</el-button>
        <el-popconfirm
          width="220"
          cancel-button-text="取消"
          confirm-button-text="确定"
          icon-color="#626AEF"
          @confirm="doDelete(scope.row.id)"
          title="确定要删除此员工吗？"
        >
          <template #reference>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    :total="pageData.total"
    :current-page="pageData.pageNum"
    :page-size="pageData.pageSize"
    :page-sizes="[10, 20, 50, 100]"
    small
    layout="total, sizes, prev, pager, next, jumper"
    @current-change="handleChangePageNum"
    @size-change="handleSizeChange"
  />
  <!-- <el-pagination
    small
    background
    layout="total, sizes, prev, pager, next"
    
    class="mt-4"
  /> -->
  <StaffForm v-if="showStaffForm" :id="curId" @close="handleClose" ref="staffForm"></StaffForm>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { GET_STAFF_LIST, DELETE_STAFF } from '@/api/staff'
import { DEL_HOUSE } from '@/api/house'
import StaffForm from './components/StaffForm.vue'
import { ElMessage } from 'element-plus'

const staffForm = ref()
const queryData = reactive({
  name: ''
})
const curId = ref('')
const pageData = reactive({
  pageNum: 1,
  pageSize: 10,
  tableData: [],
  total: 0
})
const delHouse = () => {
  DEL_HOUSE('68628').then((res) => {
    console.log(res)
  })
}
const getData = () => {
  let params = { name: queryData.name, pageNum: pageData.pageNum, pageSize: pageData.pageSize }
  GET_STAFF_LIST(params).then((res) => {
    console.log(res)
    pageData.total = res.data.total
    pageData.tableData = res.data.list
  })
}
const handleChangePageNum = (val: number) => {
  pageData.pageNum = val
  getData()
}
const handleSizeChange = (val: number) => {
  pageData.pageSize = val
  pageData.pageNum = 1
  getData()
}
getData()
const showStaffForm = ref(false)
const addStaff = () => {
  console.log('添加员工')
  curId.value = ''
  showStaffForm.value = true
  // staffForm.value.dialogFormVisible = true
  // staffForm.value.getPortList()
  // staffForm.value.
}
const handleClose = (flag?: boolean) => {
  showStaffForm.value = false
  if (flag === true) {
    getData()
  }
}

const doEdit = (id: string) => {
  curId.value = id
  console.log('编辑')
  showStaffForm.value = true
}
const doDelete = (id: string) => {
  DELETE_STAFF(id).then(() => {
    ElMessage.success('删除成功')
    getData()
  })
}
</script>

<style></style>
